<template>
  <div class="content">
    <div v-if="!car_show">
      <div class="index-header-box" id="head">
        <div class="index-header">
          <div @click="$router.back(-1)" class="back">
            <van-icon name="arrow-left"/>
          </div>
          <div class="title">订阅车辆</div>
        </div>
      </div>

      <div class="page-block">
        <div class="book-list">
          <ul class="list-body">
            <li class="item" v-if="item.car_level">{{item.car_level}}</li>
            <li class="item" v-if="item.car_address">{{item.car_address==1? "本地牌照":"外地牌照"}}</li>
            <li class="item" v-if="item.year_old">{{item.year_old}}年</li>
            <li class="item" v-if="item.go_long">{{item.go_long}}万公里</li>
            <li class="item" v-if="item.row_amount">{{item.row_amount}}升</li>
            <li class="item" v-if="item.car_dis">{{item.car_dis}}排放</li>
            <li class="item" v-if="item.car_color">{{item.car_color}}</li>
            <li class="item" v-if="item.car_case">{{item.car_case==1 ? '自动':'手动'}}</li>
            <li class="item" v-if="item.seat_numb">{{item.seat_numb}}座</li>
            <li class="item" v-if="item.oil_type">{{item.oil_type}}</li>
            <template v-if="item.other">
              <li class="item" v-for="i in  JSON.parse(item.other)">
                <template v-for="i2 in labList">
                  <template v-if="i2.id == i">
                    {{i2.title}}
                  </template>
                </template>

              </li>
            </template>

            <li class="item" v-if="item.car_country">{{item.car_country}}</li>
          </ul>
        </div>

        <template v-for="(item,index) in list">
          <div class="media-list">
            <van-swipe-cell>
              <router-link :to="{name:'buyDetail',query:{id:item.id}}">
              <van-image class="media-list-logo pull-left" lazy-load :src="img(item.series_thumb?item.series_thumb:item.series.thumb,item.head_img)">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20"/>
                </template>
              </van-image>
              </router-link>

              <div class="media-list-body pull-left">
                <router-link :to="{name:'buyDetail',query:{id:item.id}}" class="media-list-text-top">{{item.car_name?item.car_name:item.series.series_name}}</router-link>
                <div class="media-list-text-tps">{{stampToDate(item.card_time,2)}}/{{item.mileage}}万公里</div>
                <div class="media-list-text-bottom">{{item.price}}万</div>
              </div>
            </van-swipe-cell>
          </div>


        </template>
      </div>

      <infinite-loading :on-infinite="onLoad" ref="inLoading">
        <div slot="no-results" class="no-more">没有更多了～</div>
        <div slot="no-more" class="no-more">没有更多了～</div>
      </infinite-loading>

    </div>

  </div>

</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';
  export default {
    name: "user_book_list",
    components: {
        InfiniteLoading
    },
    data() {
      return {
        list:[],
        item:{},
        labList:[],
          id:this.$route.query.id,

          page:1,

        car_show: 0,
      }
    },
    computed: {},
    mounted: function () {
      this.init();
    },
    methods: {
      init(){
        let id = this.id;
        let that = this;
        this.$api.car.getLable().then(res=>{
          that.labList = res.data.data;
        });
        this.$api.member.getBook(id).then(res=>{
          this.item = res.data.data[0];
        });
      },

        onLoad($state) {
            let that = this;
            this.$api.member.getBookInfo(that.id,that.page).then(res => {
                res = res.data;
                if (res.data.length) {
                    that.list.push(...res.data);
                    that.page++;
                    $state.loaded();
                } else {
                    $state.complete();
                }
            });
        },
    },
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/index.scss";
  @import "../../assets/scss/user.scss";
</style>
